<!-- 打卡界面 -->
<template>
    <div class="test-page">
      <div class="top">
        <div class="button" v-if="!sign" @click="Sign">
          <i class="calendar-icon"></i>
          <div>签到</div>
        </div>
        <div class="button" v-if="sign">
          <i class="calendar-icon"></i>
          <div>已签到</div>
        </div>
    </div>
    <div class="ruleDescription">
      <el-alert title="成功打卡" type="success" />
      <el-alert title="本日漏签" type="info" />
      <el-alert title="已排班日期" type="warning" />
      <el-alert title="未打卡" type="error" />
    </div>
    <div class="content">
      <!-- 年份 月份 -->
      <ul class="month bottom-line">
        <!--点击会触发pickpre函数，重新刷新当前日期 -->
        <li class="arrow" @click="pickPre(currentYear,currentMonth)"><van-icon name="arrow-left"/> 上个月</li>
        <li class="year-month">
          <span>{{ currentYear }}-{{ currentMonth }}</span>
        </li>
        <li class="arrow" @click="pickNext(currentYear,currentMonth)">下个月 <van-icon name="arrow"/></li>
      </ul>

      <!-- 星期 -->
      <ul class="weekdays">
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
      </ul>

      <!-- 日期 -->
      <ul class="days bottom-line">
        <li v-for="day in days" style="border:1px solid #a8a5a5">
          <!--本月已签到日期-->
          <span v-if="day.isSign && day.isStatus === 1 && day.commonly" class="cli"/>
          <!--本月未签到日期-->
          <span v-if="day.isSign && day.isStatus === 4 " class="ccli"/>
          <!--本月缺签日期-->
          <span v-if="day.commonly  && day.isStatus === 2" class="lq"/>
          <!--本月排班日期-->
          <span v-else-if="day.commonly  && day.isStatus === false || day.isStatus === 0" class="wli"/>
          {{ day.day.getDate() }}
        </li>
      </ul>
    </div>
  </div>

</template>
<script>
import index from '../../../assets/js/personnelJs/perIndex.js';
export default index;
</script>

<style lang="scss" scoped>
@import '@/assets/css/personnelCss/perIndex.css';
</style>
<style scoped>
.el-alert {
  margin: 20px 0 0;
  display: block;
  float: left;
}
</style>